<template>
 <view class="navBarWrap" :style="{backgroundColor:background}">
   <view class="navItem" :style="{color:textColor,width}" v-for="(item,index) in navList" :key="index" >
    <img :src="item.imgUrl" >
    <view class="text"> {{item.text}}</view>
   </view>
 </view>
</template>

<script>
export default {
 inject: ['params','style','data'],

    data() {
        return {
            navList:this.data,
            background:this.style.background,
            paddingTop:this.style.paddingTop,
            rowsNum:this.style.rowsNum,
            textColor:this.style.textColor
        };
    },
    computed:{
         width(){
            return (100/this.rowsNum)+"%"
         }
    }
   

};
</script>

<style lang="scss" scoped>
.navBarWrap{
    box-sizing: border-box;
    display: flex;
    padding: 10rpx 0;
   flex-wrap: wrap;
 .navItem{
    height: 100%;
    text-align: center;
    padding-top:20rpx ;
    img{
        height:120rpx;
        width: 120rpx;
    }
    .text{
        margin-top: 10rpx;
     font-size: 26rpx;  
     
    }
 }
}
</style>